<template>
  <!-- S 头部模块 -->
  <div class="m-header">
    <a name="top" id="top"></a>
    <div class="wrapbox clearfix">

      <!--登录框 未登录-->
      <div class="login" v-show="!isLogin">
        <ul class="list clearfix">
          <li>
            <router-link to="/login">登录</router-link>
            &nbsp;&nbsp;|&nbsp;&nbsp;
          </li>
          <li>
            <router-link to="/register">注册</router-link>
          </li>
        </ul>
      </div>

      <!--登录框 登录后-->
      <div class="login" v-show="isLogin">
        <ul class="list clearfix">
          <li class="pic">
            <router-link :to="'/MySlef/'+userId">
              <img v-show="photo!=''" :src="photo" width="54" height="54"/>
              <img v-show="photo==''" src="../images/img01.png" width="54"
                   height="54"/>
            </router-link>
          </li>
          <li class="fb">
            <router-link to="/publish"><i class="fb-s"></i>发布</router-link>
          </li>
          <li class="fb"><a v-on:click="logout">&nbsp;&nbsp;|&nbsp;&nbsp;退出</a></li>
        </ul>
      </div>

      <!--logo图-->
      <h1 class="logo"><img src="../images/logo.png" width="147" height="76"/></h1>

      <!--导航-->
      <div class="nav">
        <ul class="clearfix">

          <li :class="{focus:!headerCss}">
            <router-link to="/">资讯</router-link>
          </li>
          <li :class="{focus:headerCss}">
            <router-link to="/CircleContent">圈子</router-link>
          </li>
        </ul>
      </div>
      <!--搜索框-->
      <div class="search">
        <input type="text" placeholder="请输入关键字" name="" id="" v-model="searchContent"/>
        <a class="s" @click="search">输入</a>
      </div>

    </div>
  </div>
  <!-- E 头部模块 -->
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
        searchContent: '',
      }
    },
    methods: {
      logout() {
        this.$store.dispatch('logout');
        window.location.href = '/#/';
      },
      search() {
        this.$emit('searchClick',  this.searchContent);
      }
    },
    computed: {
      ...mapGetters({
        isLogin: 'isLogin',
        username: 'username',
        photo: 'photo',
        token: 'token',
        userId: 'userId',
        headerCss: 'headerCss'
      })
    }
  }
</script>

<style scoped>

</style>
